<script setup>
// import { ref } from 'vue';
// const activeIndex = ref(0);
// // 点击导航项时更新激活索引
// const handleClick = (index) => {
//     activeIndex.value = index;
// };
</script>


<template>
    <div class="box">
        <ul>
            <li>
                <router-link to="/" exact-active-class="active">
                    <i class="icon icon-1 active"></i>
                    <span>首页</span>
                </router-link>
            </li>
            <li>
                <router-link to="/classify" exact-active-class="active">
                    <i class="icon icon-2 "></i>
                    <span>分类</span>
                </router-link>
            </li>
            <li>
                <router-link to="/about" exact-active-class="active">
                    <i class="icon icon-3 "></i>
                    <span>我的</span>
                </router-link>
            </li>
        </ul>
    </div>

</template>

<style scoped>
.box {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #fff;
    background-Color: #fff;
}

.box ul {
    display: flex;
    justify-content: space-between;
    height: 60px;
}

.box ul li {
    flex: 1;
    /* display: flex; */
    justify-content: center;
    align-items: center;

}

.box a {
    display: flex;
    text-decoration: none;
    color: black;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.box ul li i {
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.box .icon-1 {
    background-image: url('../static/image/home.png');
}

.box .icon-2 {
    background-image: url('../static/image/care.png');
}

.box .icon-3 {
    background-image: url('../static/image/person.png');
}

.box a.active .icon-1 {
    background-image: url('../static/image/home-on.png');
}

.box a.active .icon-2 {
    background-image: url('../static/image/care-on.png');
}

.box a.active .icon-3 {
    background-image: url('../static/image/person-on.png');
}

.box a.active span {
    color: #FFA940;
}
</style>